{extend name="homeheader:header"/}
{block name="content"}
<link rel="stylesheet" type="text/css" href="/home/css/classcation.css" />
	<body style="overflow-x: hidden;">
		<div class="classcation row">
			<div class="container-fluid">
				<div class="search row">
					<form action="{:url('/home/search/search')}" method="post">
						<input type="text" name="keyword" id="g_name" value="" placeholder="请输入搜索内容" class="col-xs-9" />
						<button class="col-xs-3" id="search">搜索</button>
						<i class="iconfont icon-sousuo"></i>
					</form>
				</div>
				<div class="layui-tab row">
					<ul class="layui-tab-title topcategory">
						{foreach name="category" item="vo"}
							<li id="{$vo.id}" class="category">{$vo.name}</li>
						{/foreach}
					</ul>
					<div class="layui-tab-content row goodscate">
						<div class="layui-tab-item">
							<ul class="childcategory">
								
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<ul class="row">
					<li class="col-xs-2">
						<a href="{:url('/home/index/index')}">
							<i class="iconfont icon-shouye"></i> <span>首页</span>
						</a>
					</li>
					<li class="col-xs-2 active">
						<a href="{:url('/home/goods/category')}">
							<i class="iconfont icon-icon"></i> <span>分类</span>
						</a>
					</li>
					<li class="col-xs-2">
						<a href="custom.html"><i class="iconfont icon-service"></i><span>客服</span>
						</a>
					</li>
					<li class="col-xs-2">
						<a href="{:url('/home/carts/carts')}"><i class="iconfont icon-cart1"></i> <span>购物车</span>
						</a>
					</li>
					<li class="col-xs-2">
						<a href="{:url('/home/user/home')}"><i class="iconfont icon-wode"></i> <span>我的</span>
						</a>
					</li>
				</ul>
			</div>
			<div class="ft_bg">
				<img src="/home/img/footer_bg.png"/>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		layui.use('element', function() {
			var $ = layui.jquery,
				element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
		});
	</script>
	<script type="text/javascript">
		$('.topcategory li:first').addClass('layui-this');
		/* 页面进来获取第一行的子类 */ 
		var pid = $('.topcategory li:first').attr('id');
		$.post('/home/goods/indexCategory',{id:pid},function(res){
			var data = res.data;
			var str = '';
			for(var i=0;i<data.length;i++){
				str += '<li class="col-xs-4"><a href="{:url("/home/goods/goods/id/'+data[i].id+'")}"><i class="iconfont"><img src="'+data[i].pic+'" /></i>'+data[i].name+'</a></li>';
			}

			$('.childcategory').html(str);
			$('.goodscate').find('div:nth-child(1)').addClass('layui-show');
		},'json');


		/* 点击获取对应的子类 */
		$('.topcategory .category').click(function(){
			/* 父类id */
			var pid = $(this).attr('id');
			$('.childcategory').find('li').remove();
			$.post('/home/goods/indexCategory',{id:pid},function(res){
				var data = res.data;
				var str = '';
				for(var i=0;i<data.length;i++){
					str += '<li class="col-xs-4"><a href="{:url("/home/goods/goods/id/'+data[i].id+'")}"><i class="iconfont"><img src="'+data[i].pic+'" /></i>'+data[i].name+'</a></li>';
				}
				$('.childcategory').html(str);
			},'json');
		});
	</script>
</html>
{/block}